<template>
  <div class="market_container">
    <div class="header">Market</div>
    <div class="market_list">
      <div class="list_info">
        <div class="item" v-for="(item, index) in list" :key="index">
          <div class="item_img">
            <img :src="item.img" alt="BTC">
          </div>
          <div>
            <div style="font-weight: 700;">{{ item.title }}</div>
            <div style="color: #b1b1b1;">{{ item.text }}</div>
          </div>
          <div class="echarts">
            <img src="../../assets/images/home/echarts.png" alt="echarts">
          </div>
          <div class="num">
            <div style="font-weight: 700;">{{ '$63199.98' }}</div>
            <div style="color: #39bbef;">{{ '+0.45%' }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name='Market'>
import { reactive, ref, onMounted, defineEmits, defineProps, defineExpose } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import BTC from '@/assets/images/home/BTC.png'

// 变量区
const router = useRouter()
const route = useRoute()
const state = ref('')
// 市场列表
const list = ref([
  {
    title: 'BTC/USD11',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'ETH/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'ATOM/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'LTC/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'BTC/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'ETH/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'ATOM/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'LTC/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'BTC/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'ETH/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: 'ATOM/USD',
    text: 'Bitcoin',
    img: BTC
  },
  {
    title: '123',
    text: '123',
    img: BTC
  },
])


// 代码区



onMounted(() => {

})

// 将组件中的数据进行暴露出去
defineExpose({

})
</script>

<style lang="scss" scoped>
.market_container {
  position: relative;
  padding: 10px 30px;


  .header {
    height: 80px;
    font-size: 36px;
    font-weight: 700;
  }

  .market_list {
    .list_info {
      overflow-x: hidden;
      /*x轴禁止滚动*/
      overflow-y: scroll;
      /*y轴滚动*/
      height: calc(100vh - 190px);

      .item {
        display: flex;
        border-bottom: 1px solid #b1afaf;
        font-size: 25px;
        justify-content: space-between;
        padding-bottom: 20px;
        margin-top: 30px;

        .item_img {
          width: 90px;
          height: 90px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .echarts {
          width: 240px;
          height: 58px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .num {
          display: flex;
          flex-direction: column;
          align-items: end;
        }
      }
    }
  }
}
</style>